<div class="col-lg-12" >
    <div class="card" >
        <div class="card-header">

        </div>
        <div class="row">
            <div id="product-list">

            </div>
        </div>
        <div class="row">
            <nav style="width: 500px;margin: auto">
                <ul class="pagination" id="page_nav-ul" style="display:flex;justify-content:space-between">
                    <li class="disabled">
                        <a>
                            <span><i class="mdi mdi-chevron-left"></i></span>
                        </a>
                    </li>
                    <li class="disabled">
                        <a>
                            <span><i class="mdi mdi-chevron-right"></i></span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>


    </div>
</div>

<script>
    $(document).ready(function () {
        get_page(this_page);
    })

    // function load_page_nav(page_sum, page) {
    //     if (page_sum <= 0 || page <= 0) {
    //         document.getElementById("page_nav-ul").innerHTML = "<li class=\"disabled\"><a href='#'><span><i class=\"mdi mdi-chevron-left\"></i></span></a></li><li class=\"disabled\"><a href='#'><span><i class=\"mdi mdi-chevron-right\"></i></span></a></li>";
    //         return;
    //     }
    //     var pageNavString = "";
    //     //在第一页
    //     if (page === 1) {
    //         pageNavString += "<li class=\"disabled\">" +
    //             "  <a href='#'>" +
    //             "     <span><i class=\"mdi mdi-chevron-left\"></i></span>" +
    //             "  </a>" +
    //             "</li>";
    //         pageNavString += "<li class=\"active\"><a href='#'>1</a></li>";
    //     } else {
    //         pageNavString += "<li class=\"disabled\">\n" +
    //             "  <a onclick=\"get_page(" + (page - 1) + ")\" style=\"cursor: pointer\" href='#'>\n" +
    //             "     <span><i class=\"mdi mdi-chevron-left\"></i></span>\n" +
    //             "  </a>\n" +
    //             "</li>";
    //         pageNavString += "<li><a onclick=\"get_page(" + (1) + ")\" style=\"cursor: pointer\" href='#'>1</a></li>";
    //     }
    //     for (var i = 2; i < page_sum; i++) {
    //         if ((page - 3) === i) {
    //             pageNavString += "<li class=\"disabled\"><a href='#'>...</a></li>";
    //         }
    //         if ((page - 3 < i) && (i < page + 3)) {
    //             if (page === i) {
    //                 pageNavString += "<li class=\"active\"><a href='#' onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
    //             } else {
    //                 pageNavString += "<li><a href='#' onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
    //             }
    //         }
    //         if ((page + 3) === i) {
    //             pageNavString += "<li class=\"disabled\"><a href='#'>...</a></li>";
    //         }
    //     }
    //     //在最后一页
    //     if (page_sum === page) {
    //         if (page_sum > 1) {
    //             pageNavString += "<li class=\"active\"><a href='#'>" + page_sum + "</a></li>";
    //         }
    //         pageNavString += "<li class=\"disabled\">\n" +
    //             "  <a href='#'>" +
    //             "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
    //             "  </a>\n" +
    //             "</li>";
    //         pageNavString += "</div>";
    //     } else {  //不在最后一页
    //         if (page_sum > 1) {
    //             pageNavString += "<li><a href='#' onclick=\"get_page(" + page_sum + ")\" style=\"cursor: pointer\">" + page_sum + "</a></li>";
    //         }
    //         pageNavString += "<li>" +
    //             "  <a href='#' onclick=\'get_page(" + (page + 1) + ")\' style=\'cursor: pointer\'>\n" +
    //             "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
    //             "  </a>" +
    //             "</li>";
    //     }
    //     document.getElementById("page_nav-ul").innerHTML = pageNavString;
    // }

    function get_page(page) {
        this_page=page;
        var data=product_buyer_get(page);
        var productHtmlString = "";
        if(data.products.length===0){
            document.getElementById("product-list").innerHTML = "<div class=\"row text-center\"><div>无搜索结果</div></div>";
            return;
        }
        for (let i = 0; i < data.products.length; i++) {
            var product = data.products[i];
            var productId = product.productId;
            var title = product.title;
            var price = product.price;
            var star = product.star;
            var filePath = product.filePath;
            productHtmlString+="<div class=\"col-sm-6 col-lg-3\">\n" +
                "    <div class=\"card \"  style='background-color: #bef1fe44;border-radius: 10px;margin:20px;'>\n" +
                "        <div class=\"card-header  text-center\">\n" +
                "            <a onclick='product_detail_page("+productId+")' style='cursor: pointer;'><img src=\"" + filePath + "\" alt=\"\"></a>\n" +
                "        </div>\n" +
                "        <div class=\"card-body \" >\n" +
                "            <div style=\"font-size:30px; color: #33CABB \" >¥" + price.toFixed(2) + "</div>\n" +
                "            <ul class=\"list-unstyled \" style=\"height: 80px\">\n" +
                "                <li>" + title + "</li>\n" +
                "            </ul>\n" +
                "            <div>\n" +
                "<span>\n" +
                "                <span class=\"mdi mdi-star\"  style=\"font-size: 24px;background: linear-gradient(to right, #FCC525 " + (star >= 1 ? 1 : star) * 100 + "%, #ffffff 0%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\"></span>\n" +
                "                <span class=\"mdi mdi-star\"  style=\"font-size: 24px;background: linear-gradient(to right, #FCC525 " + (star >= 2 ? 1 : star - 1) * 100 + "%, #ffffff 0%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\"></span>\n" +
                "                <span class=\"mdi mdi-star\"  style=\"font-size: 24px;background: linear-gradient(to right, #FCC525 " + (star >= 3 ? 1 : star - 2) * 100 + "%, #ffffff 0%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\"></span>\n" +
                "                <span class=\"mdi mdi-star\"  style=\"font-size: 24px;background: linear-gradient(to right, #FCC525 " + (star >= 4 ? 1 : star - 3) * 100 + "%, #ffffff 0%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\"></span>\n" +
                "                <span class=\"mdi mdi-star\"  style=\"font-size: 24px;background: linear-gradient(to right, #FCC525 " + (star >= 5 ? 1 : star - 4) * 100 + "%, #ffffff 0%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\"></span>\n" +
                "                </span>\n" +
                "            </div>\n" +
                "            <div class=\"rating\"></div>\n" +
                "                <button class=\"btn btn-default\" onclick='product_buyer_cart_add("+productId+")'><span class=\"mdi mdi-cart-plus\"></span>加入购物车</button>\n" +
                "        </div>\n" +
                "    </div>\n" +
                "</div>"
        }
        document.getElementById("product-list").innerHTML = productHtmlString;
        load_page_nav(Math.ceil(data.total / 20), page);
    }
</script>